<template>
	<!-- 个人信息页面 -->
	<view class="content">
		<view class="infouser">
			<view class="infouser_list">
				<van-cell  title-class="title-class" value-class="value-class" custom-class="custom-class" title="头像" is-link>
					<image style="width: 72rpx;" mode="widthFix" src="../../static/img/gr1.png"></image>
				</van-cell>
			</view>
			<view class="infouser_list">
				<van-cell  title-class="title-class" value-class="value-class" custom-class="custom-class" title="昵称" is-link :value="userinfo.username" />
			</view>
			<view class="infouser_list">
				<van-cell @click="cellinfo3" title-class="title-class" value-class="value-class" custom-class="custom-class" title="性别" is-link :value="columns[sex]" />
				<!-- <van-popup :show="showsex" bind:close="onClose"> -->
				<!-- </van-popup> -->
			</view>
			<view class="infouser_list">
				<van-cell @click="cellinfo4" :border="false" title-class="title-class" value-class="value-class" custom-class="custom-class" title="生日" is-link :value="date" />
				<van-calendar :min-date="minDate" :max-date="maxDate" show-confirm :show="show" @close="onClose" @confirm="onConfirm" />
			</view>
		</view>
		
		<!-- 保存按钮 -->
		<button style="font-size: 30rpx;margin-top:40rpx" type="warn">保存并使用</button>
		<!-- 性别选择弹框 -->
		<van-overlay @click="overlays" :show="showsex">
			<van-picker @cancel="cancel" show-toolbar :columns="columns" @confirm="onChanges" />
		</van-overlay>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				// 日期显示隐藏
				show:false,
				// 选中的日期
				date:"选择日期",
				minDate:new Date(1990,0,1).getTime(),
				maxDate:new Date(2021,0,31).getTime(),
				// 性别显示隐藏
				showsex:false,
				columns:["男","女"],
				sex:0,
				// 个人信息
				userinfo:{}
			}
		},
		onLoad() {
			uni.getStorage({
				key:"user",
				success: (res) => {
					this.userinfo=JSON.parse(res.data)
				},
				fail: () => {
					console.log("shib")
				}
			})
		},
		methods:{
			// 点击单元格触发
			cellinfo4(val){
				this.show=true
				console.log(val)
			},
			// 转换日期格式
			formatDate(date) {
			    date = new Date(date);
			    return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
			  },
			// 日期改变触发
			onConfirm(val){
				 // const [start, end] = val.detail;
				this.date=this.formatDate(val.detail);
				this.show=false;
				console.log('a',val)
			},
			// 关闭弹框
			onClose(){
				this.show=false
				this.showsex=false
			},
			// 选择 的性别
			onChanges(val){
				this.sex=val.detail.index || 0
				this.showsex=false
			},
			// 点击性别的取消
			cancel(){
				this.showsex=false
			},
			// 打开性别弹框
			cellinfo3(){
				console.log('3')
				this.showsex=true
			},
			// 点击性别遮罩层,关闭
			overlays(){
				this.showsex=false
			}
		}
	}
</script>

<style>
	page{
		width: 750rpx;
		height: 100%;
		background-color: #F3F3F3;
		box-sizing: border-box;
	}
	image{
		width: 100%;
		display: block;
	}
	.content{
		width: 100%;
		padding:50rpx 20rpx 20rpx;
		box-sizing: border-box;
	}
	.infouser{
		background-color: #FFFFFF;
		border: 2rpx solid #efefef;
		border-radius: 20rpx;
		overflow: hidden;
	}
	.custom-class{
		padding: 40rpx 30rpx!important;
		align-items: center;
	}
	.title-class{
		font-size: 24rpx;
		color: #000000;
		font-weight: 600;
	}
	.value-class{
		font-size: 24rpx;
	}
	.van-icon{
		font-size: 26rpx!important;
	}
	.van-cell__value{
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
</style>
